<template>
  <div class="icon-wrapper"
       v-if="showIcon">
    <ul class="icon-list">
      <li class="icon-item"
          v-for="item of list"
          :key="item.id"
          @click="handleSecond(item.id)">
        <div class="icon">
          <div class="img-wrap"
               w-95-95
               aspectratio>
            <img :src="item.cate_image"
                 alt=""
                 aspectratio-content>
            <!-- <i class="iconfont icon-lingqian"></i> -->
          </div>
        </div>
        <p class="desc">{{item.cate_name}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeIcon',
  props: {
    list: {
      type: Array
    }
  },
  computed: {
    showIcon () {
      return this.list.length
    }
  },
  methods: {
    handleSecond (id) {
      this.$localStorage.set('INDEX', JSON.stringify(true))
      this.$router.push({
        path: `/classify/all/${id}`
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.icon-wrapper
  padding-top 40px
  padding-bottom 48px
  box-sizing border-box
  background-color $common_bgc

  .icon-list
    width 100%
    background-color $common_bgc
    display flex
    justify-content space-between
    flex-wrap wrap

    .icon-item
      width 20%
      margin-bottom 8px
      position relative
      display flex
      justify-content center
      flex-direction column
      align-items center

      .icon
        width 95px
        height 96px
        border-radius 40px
        position relative
        text-align center
        line-height 95px

        .img-wrap
          border-radius 40px

      .desc
        font-size $common_fz
        font-weight 500
        color $icon_color
        line-height 72px
        text-align center
        width 100%
        ellipsis()
</style>
